<template>
	<view class="page">
		<view @click="selectAddr" class="address">
			<view class="address_left">
				<!-- <van-icon name="location-o" color="white" size="20px" /> -->
				<image src="/static/img/index/ic_position.png" mode="widthFix" style="width: 20px;"></image>
			</view>
			<view class="address_right" v-if="defaultAdress != null">
				<view><text>{{defaultAdress.realName}}</text> <text
						style="margin-left:10rpx;">{{defaultAdress.contactPhone}}</text>
				</view>
				<view>{{defaultAdress.detailAddress}}</view>
			</view>
			<view class="address_right" v-else style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
				<view class="">
					请选择地址
				</view>
				<image  class="YG-adder-img" src="/static/img/index/ic_next_black.png" mode=""></image>
				<!-- <view>
					
				</view> -->
			</view>
		</view>
		<view class="line">

		</view>
		<view class="product">
			<view class="product_info">
				<view class="prodct_left">
					<image style="width:170rpx;" mode="widthFix" :src="info.goodsImg"></image>
				</view>
				<view class="product_right">
					<view>{{info.goodsName}}</view>
					<view><text>数量：{{goodsNum}}</text><text style="margin-left:20rpx;">规格：{{info.specification}}</text>
					</view>
					<view><text class="font_small" style="color:#FF6100;">¥{{info.price}}</text></view>
				</view>
			</view>
			<view class="switch" v-if="!payFlay">
				<view>是否快递</view>

				<switch checked @change="switch1Change" color="#E4EDFE" />

			</view>

			<view class="pro_info" v-if="payFlay">
				<view><text>下单编号：</text><text>{{orderNo}}</text></view>
				<view><text>下单时间：</text><text>{{dateTime}}</text></view>
				<view><text>支付方式：</text><text>在线支付</text></view>
				<view><text>配送方式：</text><text>{{psType}}</text></view>
			</view>
		</view>
		<view class="line">

		</view>
		<view class="product_order">
			<view><text>商品总额</text><text style="color:#FF6100;">¥{{proAmount}}</text></view>
			<view><text>运费</text><text style="color:#FF6100;">¥{{number.oneparsePrice(info.freight || "0")}}</text>
			</view>
			<view><text>实付款</text><text style="color:#FF6100;">¥{{payAmount}}</text></view>
			<view><text style="width:20%;">备注：</text><input style="width:80%;" placeholder="备注描述"
					v-model="ordeForm.reference" /></view>
		</view>
		<view class="footer">
			<view class="concle" @click="cancelOrderEvent" v-if="payFlay">
				取消订单
			</view>
			<view @click="showPopup" v-if="!payFlay">提交订单</view>
			<view @click="show = true" v-else>去付款</view>

		</view>
		<u-popup v-model="show" mode="bottom" custom-style="height: 40%;" bind:close="onClose">
			<view>

				<view class="pay_type">需要支付</view>
				<view class="pay_type-fk"><text style="color:#FF6100;">¥{{payAmount}}</text></view>

				<u-radio-group v-model="value" @change="radioGroupChange" style="width: 100%;">
					<view class="pay_type-iem" v-for="(item, index) in payTypeList" :key="index"
						@click="seleradio(item)">
						<view class="pay_type-iem-left">
							<image class="pay_type-iem-img" :src="item.img" mode=""></image>
							<view class="pay_type-iem-text">
								{{item.title}}
							</view>
						</view>
						<u-radio @change="radioChange" :name="item.name"  shape="square">
							<!-- {{item.name}} -->
						</u-radio>
					</view>

				</u-radio-group>
				<view class="confirm" @click="Pay()">确认支付</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import number from "../../../utils/number.js";
	const api = require('../../../config/api');
	const util = require('../../../utils/util');
	export default {
		data() {
			return {
				value: '3',
				number: number, //声明number属性并赋值为引入的number模块
				goodsId: '',
				psType: '快递',
				payFlay: false,
				checked: false,
				show: false,
				goodsNum: "",
				dateTime: '',
				info: {},
				proAmount: '',
				payAmount: '',
				pickStore: '1',
				orderNo: '',
				ordeForm: {
					"addressId": 0,
					"goodsId": 0,
					"goodsNum": 0,
					"pickStore": "",
					"reference": "",
					"type": ""
				},
				orderPayForm: {
					"code": "",
					"img": "",
					"orderNo": '',
					"payTyle": 3
				},
				defaultAdress: {},
				payTypeList: [
					// {
					// 	img: "/static/img/index/ic_xianxia.png",
					// 	name: '1',
					// 	title: '线下打款',

					// },
					{
						img: "/static/img/index/ic_pay_ali.png",
						name: '1',
						title: '支付宝支付',
						payTyle: '1'

					},
					{
						img: "/static/img/index/ic_pay_wx.png",
						name: '2',
						title: '微信支付',
						payTyle: '2'

					},
					{
						img: "/static/img/index/ic_balance.png",
						name: '3',
						title: '余额支付',
						payTyle: '3'

					},
					// {
					// 	img: "/static/img/index/ic_xianxia.png",
					// 	name: '6',
					// 	title: '线下打款',
					// payTyle:'6'

					// },
					{
						img: "/static/img/index/ic_pay_integery.png",
						name: '7',
						title: '零元购',
						payTyle: '7'

					},
				],
				addredata: {
				
				}
			}
		},
		onLoad(o) {

			this.goodsId = o.goodsId
			this.goodsNum = parseInt(o.goodsNum)
			this.getGoodsdetail();
			this.getdefaultAdress();
			this.checked = true
		},
		onShow() {
			uni.$off('selectOtherAddr');
			// 监听全局的自定义事件
			uni.$on('selectOtherAddr', data => {
				console.log(data);
				this.defaultAdress = data.item
				// this.addrList.recieveName = data.item.recieveName
				// this.addrList.province = data.item.province
				// this.addrList.city = data.item.city
				// this.addrList.district = data.item.district
				// this.addrList.addressDetail = data.item.addressDetail
		
				// console.log(data)
			})
		},
		methods: {
			selectAddr() {
				uni.navigateTo({
					url: '/pages/address/addressManager',
			
					events: {
						selectOtherAddr: (data) => {
			
							console.log(data.item);
			
						},
					},
					success: (res) => {
			
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: '选择地址'
						})
					}
				})
			},
			// 取消订单
			cancelOrderEvent() {
				util.request(api.cancelOrderUrl + this.orderPayForm.orderNo, {}, 'POST').then((res) => {
					// console.log(res)
					if (res.code !== 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '取消订单成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			radioChange(e) {
				this.orderPayForm.payTyle = e
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
				this.orderPayForm.payTyle = e
			},
			seleradio(item) {
				this.value = item.name
				this.orderPayForm.payTyle = item.name
			},
			Pay(e) {
				if (this.value == 3) {
					this.confirmPay()
				}else if(this.value == 1){
					this.confirmPay()
				}else {
					uni.showToast({
						title: '暂不支持',
						icon: 'none'
					})
				}
			},
			async confirmPay() {
				const res = await util.request(
					api.orderPayUrl, {
						...this.orderPayForm
					},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					if(this.orderPayForm.payTyle = 2){
						uni.requestPayment({
						    provider: 'alipay',
						    orderInfo: res.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						    success: function (res) {
								uni.showToast({
									title:'支付成功',
									icon:'none'
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
						        console.log('success:' + JSON.stringify(res));
						    },
						    fail: function (err) {
							uni.showToast({
								title:'支付失败',
								icon:'none'
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
					}else{
						uni.navigateBack()
					}
					
				}
			},
			switch1Change(e) {
				this.checked = e.detail.value
				
				// console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				if (e.detail.value) {
					this.pickStore = "1"
					this.psType = "快递"
					this.payAmount = (this.info.price * this.goodsNum + this.info.freight).toFixed(2)
				} else {
					this.pickStore = "0"
					this.psType = "自提"
					this.payAmount = (this.info.price * this.goodsNum).toFixed(2)
				}
			},
			showPopup() {
				if(this.checked){
					if (this.defaultAdress == null || (Object.keys(this.defaultAdress).length === 0 && this.defaultAdress.constructor === Object)) {
					  // 代码块
					  uni.showToast({
					  	title:'请选择地址',
						icon:'none'
					  })
					}else{
						// this.show = true
						this.ordeForm.goodsNum = this.goodsNum
						this.ordeForm.goodsId = this.goodsId
						this.ordeForm.pickStore = this.pickStore
						this.ordeForm.addressId = this.defaultAdress.id;
						this.settleOrder()
					}

				}else{
					// this.show = true
					this.ordeForm.goodsNum = this.goodsNum
					this.ordeForm.goodsId = this.goodsId
					this.ordeForm.pickStore = this.pickStore
					this.ordeForm.addressId = '';
					// this.defaultAdress.id
					this.settleOrder()
				}
				
			},


			async getGoodsdetail() {
				const res = await util.request(
					api.goodsDetailsUrl + '?goodsId=' + this.goodsId, {},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.info = res.data.result
					this.proAmount = (res.data.result.price * this.goodsNum).toFixed(2),
						this.payAmount = (res.data.result.price * this.goodsNum + res.data.result.freight).toFixed(2)
				}
			},
			async settleOrder() {
				const res = await util.request(
					api.settleOrderUrl, {
						...this.ordeForm
					},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.show = true
					this.payFlay = true
					this.orderNo = res.data
					this.orderPayForm.orderNo = res.data
					this.getCurrentDateTime();
				}
			},
			getCurrentDateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				this.dateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			async getdefaultAdress() {
				const res = await util.request(
					api.defaultAdressUrl, {

					},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.defaultAdress = res.data
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.YG-adder-img {
		width: 8px;
		height: 10px;
	
		image {
			height: 100%;
			width: 100%;
		}
	}
	.line {
		width: 100%;
		height: 3px;
		background-color: #E5E5E5;
	}

	.address {
		padding: 30rpx 32rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.address_left {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		// background-color: #E30F06;
	}

	.address_right {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.address_right>view:last-child {
		margin-top: 10rpx;
	}

	.product {
		padding: 20rpx 32rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.product_info {
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.prodct_left {
		display: flex;
	}

	.product_right {
		margin-left: 20rpx;
	}

	.product_right>view:nth-child(1) {
		font-size: 30rpx;
	}

	.product_right>view:nth-child(2) {
		font-size: 24rpx;
	}

	.product_right>view:nth-child(3) {
		font-size: 30rpx;
	}

	.switch {
		padding-top: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.product_order {
		font-size: 30rpx;
	}

	.pro_info {
		padding-top: 10rpx;
		font-size: 14px;
	}

	.pro_info>view {
		height: 40px;
		line-height: 40px;
		// padding-top: 10rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.product_order>view {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.product_order {
		padding: 0 32rpx;
		padding-top: 20rpx;
	}

	.product_order>view {
		padding-top: 10rpx;
		font-size: 28rpx;
	}

	.footer {
		position: fixed;
		bottom: 10rpx;
		right: 32rpx;
		left: 0;
		display: flex;
		justify-content: flex-end;

	}

	.footer>view {
		width: 40%;
		background-color: #FE0000;
		color: white;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 50rpx;
	}

	.concle {
		border: 1rpx solid #000;
		width: 40%;
		background-color: #fff !important;
		color: #000000 !important;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 50rpx;
		margin-right: 20px;
	}

	.pay_type {
		text-align: center;
		font-size: 15px;
		padding: 20rpx 0;
	}

	.pay_type-fk {
		text-align: center;
		font-size: 15px;
	}

	.confirm {
		margin: 40rpx auto;
		width: 90%;
		background-color: #4076F0;
		font-size: 32rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 8px;
		color: #ffffff;
	}

	.transter_input {
		display: flex;
		align-items: center;
		padding: 20px 10vw;
	}

	.transter_input>text {
		font-size: 34rpx;
	}

	.transter_input>input {
		flex: 1;
		box-sizing: border-box;
		border-bottom: 1rpx solid #cecbcb;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.pay_type-iem {
		display: flex;
		align-items: center;
		width: 100%;
		// flex-direction: column;
		justify-content: space-between;
		height: 50px;
	}

	.pay_type-iem-left {
		display: flex;
		align-items: center;
	}

	.pay_type-iem-img {
		height: 30px;
		width: 30px;
		margin-left: 15px;
	}

	.pay_type-iem-text {
		margin-left: 15px;
		margin-right: 15px;
		font-size: 16px;
		color: #000000;
	}
</style>